$(function () {

  // 封装一个初始化文章的函数
  function initCateList() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      // console.log(res);
      // 定义一个空数组
      const row = []

      // 遍历数组 得到的值放到框架内
      // 放到框架内的值存到定义的数组中
      // 序号用索引值显示所以要 index+1 这样的话删除中间的值不会不连贯
      res.data.forEach((item,index) => {
        row.push(`<tr>
        <td>${index+1}</td>
        <td>${item.cate_name}</td>
        <td>${item.cate_alias}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="${item.id}">修改</button>
          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
        </td>
      </tr>`)
      })
      // 把数组中的值渲染到tbody中
      $('tbody').html(row)

    })
  }
  // 调用函数
  initCateList()


  // 点击按钮弹出页面层
  let addindex = null
  $('#btnShowAdd').on('click', function () {
    // 调用layui中的open方法 找到对应的同级的属性值
    addindex = layer.open({
      // 设置层类型
      type: 1,
      // 设置弹出层的宽高 字符串形式 area:['宽','高']
      area: ['500px', '250px'],
      // 弹出层的页头
      title: '添加文章分类',
      // 弹出层的内容  使用html() 获取里面的框架
      content: $('#content_add').html()
      });     
        
  })

  // 校验输入的规则
  layui.form.verify({
    // 分类名称
    uname:[/^\S{1,10}$/,'非空字符串、长度为 1-10'],
    // 分类别名
    cate_alias:[/^[a-zA-Z0-9]{1,15}$/,'只能是字母数字、长度为 1-15']
  })

  // 事件委托选择弹出层的表单内容
  $('body').on('submit', '#form-add', function (e) {
    // 阻止表单默认行为
    e.preventDefault()

    // 获取弹出层的表单数据
    const data = $(this).serialize()
    // console.log(data);
    axios.post('/my/cate/add', data).then(({ data: res }) => {
      // console.log(res);
      if (res.code === 0) {
        // 提示添加成功
        layer.msg(res.message)
        // 添加到页面 刷新页面
        initCateList()
        // 关闭弹出层
        layer.close(addindex)
      }
    })
  })


  let addedit = null
  // 事件委托点击删除删除对应的id分类
  $('tbody').on('click', '.btn-edit', function () {
    // console.log(123);
    const id = $(this).attr('data-id')
    if (id == 1 || id == 2) {
      return layer.msg('此条数据不允许修改')
    }


    addedit = layer.open({
      // 设置层类型
      type: 1,
      // 设置弹出层的宽高 字符串形式 area:['宽','高']
      area: ['500px', '250px'],
      // 弹出层的页头
      title: '修改文章分类',
      // 弹出层的内容  使用html() 获取里面的框架
      content: $('#content_edit').html()
    });
    
    // 获取对应的id值
    
    // console.log(id);
    // 获取服务器的数据  携带查询参数id值
    axios.get('/my/cate/info', {
      params:{id}
    }).then(({ data: res }) => {
      // console.log(res);
      // 判断返回的code是否为0
      if (res.code === 0) {
      // 使用layui.form.val()方法 填写全部的表单
      // 第一个值是form表单id的值 第二个是填写的内容
      layui.form.val('form-edit',res.data)
     }
    })
  })

  // 事件委托更新分类表单内容
  $('body').on('submit', '#form-edit', function (e) {
    // 阻止表单默认行为
    e.preventDefault()
    // console.log(123);
    const id = $(this).serialize()
    // console.log(id);
    axios.put('/my/cate/info', id).then(({ data: res }) => {
      // console.log(res);
      if (res.code === 0) {
      // 提示更新分类成功
        layer.msg(res.message)
        // 重新调用刷新页面
        initCateList()
        // 关闭弹出层
        layer.close(addedit)
      }
    })
  })

  // 事件委托点击删除按钮
  $('tbody').on('click', '.btn-delete', function () {
    // 获取标签上的id值
    const id = $(this).attr('data-id')
    console.log(id);
    if (id == 1 || id == 2) {
      return layer.msg('此条数据不允许删除')
    }

    // 弹出提示的弹出层
    layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
      //do something
      axios.delete('/my/cate/del', {
        params:{id}
      }).then(({ data: res }) => {
        // console.log(res);

        if (res.code === 0) {
          // 提示信息
          layer.msg(res.message)
          // 刷新页面 调用初始化函数
          initCateList()
        }
      })

      layer.close(index);
    })

    
  })
})